<template>
  <div id='tmpl'>
    <div class="silder">
        <silder v-bind:imgs='imgs'></silder>
    </div>
    <div class="infos">
        <h4>{{info.title}}</h4>
        <p class="line"></p>
        <ul>
            <li>
                <span class="red">市场价:￥{{info.sell_price}}</span>
                <s>原价:￥{{info.market_price}}</s>
            </li>
            <li class="number">
                <span>购买数量:</span> <inputNumber class="inputNum" v-on:datacout='postcount'> </inputNumber>
                <transition name='show' 
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter"
                >
                    <div class="ball" v-show="isshow"></div>
                </transition>
            </li>
            <li >
                <mt-button type="primary" size="small" class="mleft">立即购买</mt-button>
                <mt-button type="danger" size="small" class="mright" @click="toshopcar">加入购物车</mt-button>
            </li>
        </ul>
    </div>
    <div class="shopinfo">
        <h5>商品参数</h5>
        <p class="line"></p>
        <ul>
            <li>商品货号: {{info.goods_no}}</li>
            <li>库存情况: {{info.stock_quantity}}</li>
            <li>上架时间:{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
        </ul>
    </div>
    <div class="tuwen">
        <router-link v-bind="{to:'/goods/goodsimginfo/'+id}" >
            <mt-button type="primary" size="large" class="tu">图文详情</mt-button>
        </router-link>
        <router-link v-bind="{to:'/goods/goodscomment/'+id}">
            <mt-button type="danger" size="large" class="shop">商品评论</mt-button>
        </router-link>
    </div>
  </div>
</template>
<script>
import silder from '../subcomment/silder.vue';
import common from '../../kikt/comment.js';
import { Toast } from 'mint-ui';
import inputNumber from '../subcomment/inputNumber.vue';
import {vm,COUNTSTR} from '../../kikt/vm.js';
import {setItem,valueObj} from '../../kikt/local.js';
export default {
  components:{
    silder,
    inputNumber
  },
  data () {
    return {
        id:0,
        imgs:[],
        info:{},
        inputnumcount:1,
        isshow:false
    };
  },
  created(){
      this.id = this.$route.params.id
      this.getinfoimg();
      this.getinfos();
  },
  methods:{
      getinfoimg:function(){
          var url = common.apidomain + '/api/getthumimages/'+this.id;
          this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast(res.body.message);
                    return;
                }
                this.imgs = res.body.message;
          })
      },
      getinfos:function(){
         var url = common.apidomain + '/api/goods/getinfo/'+this.id;
          this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast(res.body.message);
                    return;
                }
                this.info = res.body.message[0];
          })
      },
      postcount:function(count){
         
            this.inputnumcount = count;
      },
      toshopcar(){
          vm.$emit(COUNTSTR,this.inputnumcount)
          //将数据保存到localStroage中
          valueObj.goodsid = this.id;
          valueObj.count = this.inputnumcount;
          setItem(valueObj)
          this.isshow = !this.isshow;
      },
      beforeEnter(el){
          el.style.transform = "translate(0px,0px)";

      },
      enter(el,done){
        el.offsetWidth;
          el.style.transform = 'translate(95px,250px)';
          done();
      },
      afterEnter(el){
          this.isshow = !this.isshow;
      }

  }
}
</script>
<style lang="css" scoped>
    .silder{
        overflow: hidden;
        border:1px solid rgba(0,0,0,0.2);
        margin:5px 0px;
        border-radius: 5px;
    }
    .infos,.shopinfo {
        overflow: hidden;
        border:1px solid rgba(0,0,0,0.2);
        padding: 5px;
        border-radius: 5px;
    }
    .infos h4 {
        color: #0094FF;
          padding: 5px;
    }
    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #ccc;
       
    }
    .infos ul,.shopinfo ul {
        padding-left: 0px;
        padding: 5px;
        margin: 5px 0;
    }
    .infos ul li,.shopinfo ul li {
        list-style: none;
        height: 40px;
        line-height: 40px;
    }
    .infos ul li .red {
        color: red;
    }
    .infos ul li s {
        float: right;
        margin-right: 5px;
        font-size: 14px;
    }
    .infos .mleft {
        margin-right: 5px;
    }
    .tuwen {
        padding: 5px 0;
        overflow: hidden;
    }
    .tuwen .tu,.tuwen .shop {
        margin: 10px 0;
    }
    .infos .number {
        position: relative;
    }
    .infos .number .inputNum {
        position: absolute;
        top: 5px;
        left:90px;
    }
    .number .ball {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background: red;
        z-index: 100;
        position: fixed;
        top:450px;
        left: 140px;
        transition: all 0.4s ease;
    }
</style>